"use client";

import { useEffect, useRef } from "react";
import { motion } from "framer-motion";

export function HeroAnimation() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    
    let animationFrameId: number;
    let particles: Particle[] = [];
    
    // Create particle class
    class Particle {
      x: number;
      y: number;
      size: number;
      speedX: number;
      speedY: number;
      color: string;
      
      constructor() {
        this.x = Math.random() * (canvas as HTMLCanvasElement).width;
        this.y = Math.random() * (canvas as HTMLCanvasElement).height;
        this.size = Math.random() * 3 + 1;
        this.speedX = (Math.random() - 0.5) * 0.5;
        this.speedY = (Math.random() - 0.5) * 0.5;
        this.color = `rgba(${80 + Math.random() * 100}, ${230 + Math.random() * 20}, ${200 + Math.random() * 50}, ${0.5 + Math.random() * 0.5})`;
      }
      
      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        
        if (this.x > (canvas as HTMLCanvasElement).width) this.x = 0;
        else if (this.x < 0) this.x = (canvas as HTMLCanvasElement).width;
        
        if (this.y > (canvas as HTMLCanvasElement).height) this.y = 0;
        else if (this.y < 0) this.y = (canvas as HTMLCanvasElement).height;
      }
      
      draw() {
        (ctx as CanvasRenderingContext2D).fillStyle = this.color;
        (ctx as CanvasRenderingContext2D).beginPath();
        (ctx as CanvasRenderingContext2D).arc(this.x, this.y, this.size, 0, Math.PI * 2);
        (ctx as CanvasRenderingContext2D).closePath();
        (ctx as CanvasRenderingContext2D).fill();
      }
    }
    
    function initParticles() {
      particles = [];
      const numberOfParticles = Math.floor(((canvas as HTMLCanvasElement).width * (canvas as HTMLCanvasElement).height) / 15000);
      
      for (let i = 0; i < numberOfParticles; i++) {
        particles.push(new Particle());
      }
    }
    
    // Set canvas size
    const handleResize = () => {
      (canvas as HTMLCanvasElement).width = window.innerWidth;
      (canvas as HTMLCanvasElement).height = window.innerHeight;
      initParticles();
    };
    
    window.addEventListener("resize", handleResize);
    handleResize();
    
    function connectParticles() {
      const maxDistance = 150;
      
      for (let a = 0; a < particles.length; a++) {
        for (let b = a; b < particles.length; b++) {
          const dx = particles[a].x - particles[b].x;
          const dy = particles[a].y - particles[b].y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < maxDistance) {
            const opacity = 1 - (distance / maxDistance);
            (ctx as CanvasRenderingContext2D).strokeStyle = `rgba(88, 203, 188, ${opacity * 0.4})`;
            (ctx as CanvasRenderingContext2D).lineWidth = 1;
            (ctx as CanvasRenderingContext2D).beginPath();
            (ctx as CanvasRenderingContext2D).moveTo(particles[a].x, particles[a].y);
            (ctx as CanvasRenderingContext2D).lineTo(particles[b].x, particles[b].y);
            (ctx as CanvasRenderingContext2D).stroke();
          }
        }
      }
    }
    
    function animate() {
      (ctx as CanvasRenderingContext2D).clearRect(0, 0, (canvas as HTMLCanvasElement).width, (canvas as HTMLCanvasElement).height);
      
      for (const particle of particles) {
        particle.update();
        particle.draw();
      }
      
      connectParticles();
      animationFrameId = requestAnimationFrame(animate);
    }
    
    animate();
    
    // Cleanup
    return () => {
      window.removeEventListener("resize", handleResize);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);
  
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1.5 }}
      className="absolute inset-0 overflow-hidden"
    >
      <canvas
        ref={canvasRef}
        className="w-full h-full"
      />
    </motion.div>
  );
} 